<template>
	<view class="module flex_ZC">
		<NavTitle :title="title" :backgroundColor='backgroundColor' @leftClick="leftClick"></NavTitle>
		<view class="describe">
			<view class="">
				<image :src="baseUrl + '/static/ymimage/remind.png'" class="remind" mode="aspectFill"></image>
			</view>
			<view v-if="company_type=='sole_proprietorship'">个体工商户店默认最多选择两个经营品类，如想增加更多经营品类，可在开店成功后申请追加</view>
			<view v-if="company_type=='ordinary'">企业普通店默认最多选择两个经营品类，如想增加更多经营品类，可在开店成功后申请追加</view>
		</view>
		<view class="flex_Z">
			<view class="mt24" v-for="(item,index) in category" :key="index">
				<text class="f28 c6 ">{{item.name}}</text>
				<view class="category flex_spa">
					<view class="category_box flex_c" @click="putState(item,ind,company_type)"
						:class="isactive(iten)?'active':''" v-for="(iten,ind) in item.children" :key="ind">
						<text>{{iten.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="mt40 flex_Z">
			<text class="f24 c9">小提示：</text>
			<view class="hint mar24 flex_Z">
				<!-- <text> • 个人店默认最多支持选择两个主营类目，之后每增加一个类目，店铺保证金额外增加500元;</text>
				<text> • 主营类日开店后可以修改调整:</text> -->
				<text class="c9"> • 按照法律法规，部分类目需要额外提交特殊资质</text>
			</view>
		</view>

		<view class="empty2"></view>
		<view class="empty"></view>
		<view class="btns flex_ld">
			<text class="sign_out" @click="leftClick">上一步</text>
			<view class="service" @click="$u.debounce(nextStep, 300)">
				<text>下一步</text>

			</view>
		</view>

	</view>

</template>

<script>
	import {
		array
	} from 'js-md5';
	import {
		cloudCategory
	} from '@/api/cloudMall.js'
	import {
		settledOneSave
	} from '@/api/settled.js'
	export default {
		data() {
			return {
				title: "选择经营品类",

				company_type: "", //店铺类型
				// 1 个人店 2 旗舰店 3 专卖店 4 专营店 5 普通店
				shopIndex: 0,
				backgroundColor: '',
				baseUrl: this.$imageBaseUrl,
				ymDetails: {},
				fileList1: [],
				halfSfzzm: '',
				info: {},
				category: [],
				categoryList: [],
				// 选中的经营品类
				tableList: [],
				// 选中的一级分类
				categoryTitle: '',
				modifyState: false
			}
		},
		onLoad(options) {
			console.log(options.data);
			let data = JSON.parse(options.data)
			let active = data.active
			if (active == 1) {
				this.company_type = 'sole_proprietorship'
			} else if (active == 2) {
				this.company_type = 'flagship'
			} else if (active == 3) {
				this.company_type = 'exclusive'
			} else if (active == 4) {
				this.company_type = 'specialty'
			} else if (active == 5) {
				this.company_type = 'ordinary'
			}
			this.getCategory()
			if (data.modifyState) {
				this.modifyState = data.modifyState
				this.ymDetails = JSON.parse(uni.getStorageSync('ymShopDetails')) || {}
			}
		},
		methods: {

			// 获取经营品类
			getCategory() {
				cloudCategory().then(res => {
					this.category = res.data.filter(item => item.id != 0)
					this.category.map(item => {
						item.children.map(iten => {
							this.categoryList = this.categoryList.concat(iten)
							if(this.ymDetails.classify){
								let classify = this.ymDetails.classify.split(',')
								if (classify.length > 0) {
									classify.map(iten => {
										this.tableList = [...new Set(this.tableList.concat(this
											.categoryList.filter(item => item.id ==
												iten)))]
									})
								}
							}
							
						})

					})
				})
			},
			isactive(item) {
				return this.tableList.some(ele => ele.id == item.id)
			},
			putState(iten, index, company_type = 'sole_proprietorship') {
				var that = this
				let falg = that.tableList.some(item => item.id == iten.children[index].id);
				switch (company_type) {
					case 'sole_proprietorship':
						if (falg) {
							let falg1 = that.tableList.findIndex(item => item.id == iten.children[index].id)
							that.tableList.splice(falg1, 1)
						} else {
							if (that.tableList.length > 1) {
								uni.$u.toast('个体工商户最多选择两个经营类目')
							} else {

								that.tableList.push(iten.children[index])
							}
						}
						break
					case 'ordinary':
						if (falg) {
							let falg1 = that.tableList.findIndex(item => item.id == iten.children[index].id)
							that.tableList.splice(falg1, 1)
						} else {
							if (that.tableList.length > 1) {
								uni.$u.toast('普通店入驻时最多可选两个类目')
							} else {

								that.tableList.push(iten.children[index])
							}
						}
						break
					case 'specialty':
						if (!that.categoryTitle) {
							that.categoryTitle = iten.name
						} else {
							if (that.categoryTitle != iten.name) {
								uni.$u.toast('专营店不支持夸大类选择')
								return
							}
						}
						if (falg) {
							let falg1 = that.tableList.findIndex(item => item.id == iten.children[index].id)

							that.tableList.splice(falg1, 1)
							if (that.tableList.length == 0) {
								that.categoryTitle = ''
							}
						} else {

							that.tableList.push(iten.children[index])
						}
						break
					default:
						if (falg) {
							let falg1 = that.tableList.findIndex(item => item.id == iten.children[index].id)

							that.tableList.splice(falg1, 1)
						} else {
							if (that.tableList.length > 4) {
								uni.$u.toast('店铺最多选择五个经营类目')
							} else {

								that.tableList.push(iten.children[index])
							}
						}
				}
			},
			nextStep() {
				if (this.tableList.length == 0) {
					uni.$u.toast('请先选择经营品类')
				} else {
					uni.showLoading({
						title: '',
						mask: true
					});
					let ids = this.tableList.map(item => {
						return item.id
					})
					let data = {
						company_type: this.company_type,
						classify_id: ids.join(','),
						mask:1
					}
					settledOneSave(data).then(res => {
						if (res.code == 1) {
							const data = {
								id:res.data.id,
								company_type: this.company_type,
							}
							if (this.modifyState) {
								data.modifyState = true
							}
							console.log(JSON.stringify(data));
							uni.navigateTo({
								url: '/pageYm/ymJoin/joinApplyTwo?data=' + JSON.stringify(data),
								success() {
									uni.hideLoading()
								}
							})
						}
					})


				}
			},

			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
		},
		// 页面滚动
		onPageScroll: function(e) {
			const scrollTop = e.scrollTop; // 获取页面滚动位置
			// 根据滚动位置修改状态栏样式
			if (scrollTop > 20) {
				this.backgroundColor = '#ffffff';
			} else {
				this.backgroundColor = '';
			}
			// console.log("滚动距离为：" + e.scrollTop);
		},
	}
</script>

<style scoped>
	.module {
		width: 750rpx;
		margin: 0 auto;
		padding: 0 32rpx;
	}

	.describe {
		background: rgba(250, 110, 1, 0.1);
		border-radius: 10rpx;
		font-size: 22rpx;
		color: #FA6E01;
		margin: 24rpx 0;
		padding: 8rpx 16rpx;
		display: flex;
	}

	.remind {
		width: 22rpx;
		height: 22rpx;
		margin-right: 8rpx;
		margin-top: 7rpx;
	}

	.mt24 {
		margin-top: 24rpx;
		z-index: 4;
	}

	.mt40 {
		margin-top: 40rpx;
	}

	.mal8 {
		margin-left: 8rpx;
	}

	.tips {
		width: 650rpx;
		font-size: 20rpx;
		padding: 10rpx 10rpx;
		background: #FFF5EE;
		color: #FA6E01;
	}


	.category {
		width: 100%;
	}

	.category_box {
		width: 316rpx;
		height: 64rpx;
		border-radius: 12rpx;
		border: 2rpx solid #FFCC28;
		margin: 40rpx 0 0;
		color: #FABF00;
		font-size: 30rpx;
	}

	.active {
		width: 316rpx;
		height: 64rpx;
		background: #FFCC28;
		border-radius: 12rpx;
		font-size: 30rpx;
		color: #333333;
	}

	.hint {
		font-weight: 400;
		font-size: 26rpx;
		color: #3D3D3D;
		line-height: 47rpx;
		text-indent: 2em;
	}

	.btns {
		position: fixed;
		bottom: 0rpx;
		width: 690rpx;
		height: 138rpx;
		z-index: 7;
		background: #F5F7F5;
	}

	.sign_out {
		width: 158rpx;
		height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		line-height: 88rpx;
		text-align: center;
		background: #FFFFFF;
		font-weight: 500;
		border-radius: 20rpx;
		border: 2rpx solid rgba(153, 153, 153, 0.18);
	}

	.service {
		position: relative;
		width: 504rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		background: #FFCC28;
		border-radius: 20rpx;
	}
</style>